<template>
    <view class="content">
        <view class="reportDetails">
		<view class="DetailsBox">
        <u-steps current="0" inactiveColor='#EEE' :inactiveIcon="inactiveIcon" :activeIcon='activeIcon'
				direction="column">
				<u-steps-item v-for="(item,index) in stepList" :key='index'>
					<view class="descBox" slot="desc">
						<!-- <view class="stepTitle">
							<view :class="item.stat=='0'?'titText':'titTextGary'">{{item.statVal}}</view>
							<view class="titDate">{{item.date}}</view>
						</view> -->
						<view class="desc">
							<view class="item_row" v-if="item.workName">
								<view class="item_title">
									工作人员
								</view>
								<view class="item_cont">
									<view class="name">
										{{item.workName}}
									</view>
									<view class="phoneBox">
										{{item.phone}}
										<img class='image' src="@/static/weichuang/pic_yonghuzhuye_touxiang_pic.png" alt="电话">
									</view>
								</view>
							</view>
							<view class="item_row" v-if="item.decs">
								<view class="item_title">
									跟进描述
								</view>
								<view class="item_cont">
									{{item.decs}}
								</view>
							</view>
							<view class="item_row" v-if="item.reportType">
								<view class="item_title">
									报修类别
								</view>
								<view class="item_cont">
									{{item.reportType}}
								</view>
							</view>
							<view class="img_row" v-if="item.imagSrc">
								<view class="textHidden">
									隐藏文字
								</view>
								<view class="item_img">
									<img class='Preview' :src="i.src" alt="图片" v-for="(i,index) in item.imagSrc"
										:key="index">
								</view>
							</view>
						</view>
					</view>
				</u-steps-item>
			</u-steps>
    </view>
    </view>
    </view>
  </template>
  <script>
  export default {
    data() {
        return {
            stepList: [{
						id: '0',
						stat: '0',
						statVal: '代缴费',
						date: '2022.08.13 13:20:28',
						workName: '唐小鸭',
						phone: '19996554658',
						decs: 'sdafdsdafsd',
						reportType: '电维修',
						imagSrc: [{
								src: '../static/weichuang/pic_yonghuzhuye_touxiang_pic.png'
							},
							{
								src: '../static/weichuang/pic_yonghuzhuye_touxiang_pic.png'
							},
							{
								src: '../static/weichuang/pic_yonghuzhuye_touxiang_pic.png'
							},
							{
								src: '../static/weichuang/pic_yonghuzhuye_touxiang_pic.png'
							},
						]
					},
					{
						id: '1',
						stat: '1',
						statVal: '已跟进',
						date: '2022.08.13 13:20:28',
						workName: '唐小鸭1',
						phone: '19996554228',
						decs: 'sdafdsdafsd',
						imagSrc: [{
							src: '../static/weichuang/pic_yonghuzhuye_touxiang_pic.png'
						}]
					},
					{
						id: '2',
						stat: '2',
						statVal: '已派单',
						date: '2022.08.13 13:20:28',
						workName: '唐小鸭2',
						phone: '19996554658',
					},
				],
				activeIcon: '28',
				inactiveIcon: '26',

        }
    }
  };
  </script>
  <style scoped lang="scss">
  .content {
    .reportDetails {
		width: 100%;
		min-height: calc(100vh - 88rpx);
		padding: 60rpx 40rpx 20rpx 50rpx;
		box-sizing: border-box;

		.DetailsBox {
			width: 100%;
			// height: 500rpx;
			box-sizing: border-box;


			.descBox {
				width: 100%;
				margin-bottom: 50rpx;

				.stepTitle {
					width: 100%;
					padding-left: 20rpx;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;

					.titText {
						width: 120rpx;
						height: 46rpx;
						background: #D2DFF7;
						border-radius: 0rpx 30rpx 0rpx 30rpx;
						text-align: center;
						font-size: 26rpx;
						font-weight: 400;
						line-height: 46rpx;
						color: #307AF0;
					}

					.titTextGary {
						width: 120rpx;
						height: 46rpx;
						background: #CFD5E2;
						border-radius: 0rpx 30rpx 0rpx 30rpx;
						text-align: center;
						font-size: 26rpx;
						font-weight: 400;
						line-height: 46rpx;
						color: #333333;
						;
					}

					.titDate {
						height: 46rpx;
						line-height: 46rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
					}
				}

				.desc {
					border-radius: 30rpx;
					padding: 20rpx 30rpx 40rpx 30rpx;
					box-sizing: border-box;
                    background: rgba(39,39,39,0.5); 
					margin-top: 20rpx;

					.item_row {
						width: 100%;
						display: flex;
						font-size: 28rpx;
						margin-top: 20rpx;

						.item_title {
							font-weight: 400;
							color: #999999;
							font-size: 28rpx;
							margin-right: 20rpx;
						}


						.item_cont {
							height: 100%;
							color: #333333;
							display: flex;

							.name {
								font-weight: 600;
							}

							.phoneBox {
								height: 100%;
								font-weight: 400;
								display: flex;
								align-items: center;
								margin-left: 30rpx;

								.image {
									width: 48rpx;
									height: 48rpx;
								}
							}
						}
					}

					.img_row {
						width: 100%;
						display: flex;
						margin-top: 10rpx;

						.textHidden {
							font-weight: 400;
							color: #999999;
							font-size: 28rpx;
							margin-right: 20rpx;
							padding-top: 10rpx;
							opacity: 0;
						}

						.item_img:after {
							content: "";
							width: 30%;
						}

						.item_img {
							width: 418rpx;
							box-sizing: border-box;
							display: flex;
							justify-content: space-between;
							flex-wrap: wrap;

							.Preview {
								width: 130rpx;
								height: 130rpx;
								border: 1rpx solid;
								border-radius: 10rpx;
								margin-top: 20rpx;
							}
						}
					}
				}
			}
		}
	}
    
    /deep/ .u-steps-item__wrapper {
		background-color: rgba(39,39,39,0);
	}
    
  }
  </style>